<template>
    <YvRow id="yv-menu-body">
        <YvRow class="yv-menu">
            <!-- 若雨 menu top -->
            <YvCol :span="10" :sm="40">
                <router-link to="/" id="logoLink">
                    <img src="@/assets/reyvLogo.png" class="logo">
                    若雨
                </router-link>
            </YvCol>
            <!-- 若雨 mobile 展开按钮 -->
            <YvCol :span="0" :sm="1" id="yv-menu-mobile-btn" @click="mobileMenu = !mobileMenu">
                <img class="logo" :src="mobileMenu ? btnHide : btnShow">
            </YvCol>
            <!-- 若雨 menu middle -->
            <YvCol :span="20" :sm="mobileMenu ? 40 : 0" class="yv-middle-menu">
                <YvCol :span="10" :sm="10" @click="goHref('/develop')">
                    <YvGroup text="开发" class="hover-link">
                        <YvGroupItem @click.stop="goHref('/develop/front')">前端开发</YvGroupItem>
                        <YvGroupItem @click.stop="goHref('/develop/back')">后端开发</YvGroupItem>
                        <YvGroupItem @click.stop="goHref('/develop/exe')">桌面开发</YvGroupItem>
                        <YvGroupItem @click.stop="goHref('/develop/miniapp')">小程序开发</YvGroupItem>
                        <YvGroupItem @click.stop="goHref('/develop/all')">一站式开发</YvGroupItem>
                    </YvGroup>
                </YvCol>
                <!-- BEIANTEST -->
                <YvCol :span="10" :sm="10">
                    <YvGroup text="游戏" @click="goHref('/game')" class="hover-link">
                        <YvGroupItem @click.stop="goHref('/game')">列表</YvGroupItem>
                        <YvGroupItem @click.stop="goHref('/game')">后台</YvGroupItem>
                    </YvGroup>
                </YvCol>
                <YvCol :span="10" :sm="10">
                    <YvGroup text="文章" @click="goHref('/article/editor')" class="hover-link">
                        <YvGroupItem @click.stop="goHref('/article')">列表</YvGroupItem>
                        <YvGroupItem @click.stop="goHref('/article/editor')">编辑器</YvGroupItem>
                    </YvGroup>
                </YvCol>
                <YvCol :span="10" :sm="10" @click="goHref('/websiteinfo')" class="hover-link">
                    <span class="font-white">关于</span>
                </YvCol>
            </YvCol>
            <!-- 若雨 menu bottom / none -->
            <YvCol :sm="0" :span="10" class="yv-electron-drag font-white">
                 当前环境: {{ inElectron ? 'Electron' : '浏览器' }}
            </YvCol>
        </YvRow>
    </YvRow>

</template>

<script>
import btnShow from '@/assets/icons/show.png';
import btnHide from '@/assets/icons/hide.png';
export default {
    name: 'menubar',
    data() {
        return {
            mobileMenu: true,
            btnShow,
            btnHide,
            inElectron: false,
        }
    },
    created() {
        var userAgent = navigator.userAgent.toLowerCase()
        console.log(userAgent)
        if (userAgent.indexOf(' electron/') > -1) {
            this.inElectron = true;
        }
    },
    methods: {
        goHref(url) {
            this.$router.push(url);
        }
    }
}
</script>

<style scoped>
#yv-menu-mobile-btn {
    height: 18pt;
    width: 18pt;
    color: white;
    position: absolute;
    right: 0pt;
    top: 0pt;
    padding: 6pt;
    z-index: 999;
}

#yv-menu-mobile-btn img {
    height: 100%;
    width: 100%;
}

#yv-menu-body {
    background: var(--yv-main-color);
    padding: 4pt 0pt;
    color: var(--yv-flip-color);
    font-size: 14pt;
    text-align: center;
    vertical-align: middle;
}

#yv-menu-body a {
    color: var(--yv-flip-color);
}


#yv-menu-body a:hover {
    color: var(--yv-link-color);
    text-decoration: none;
}

.yv-menu .yv-col {
    display: flexbox;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

#logoLink {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16pt;
    font-weight: bold;


}

.logo {
    max-width: 24pt;
    max-height: 24pt;
}

.hover-link:hover {
    cursor: pointer;
}

/deep/ .yv-group-label {
    cursor: pointer;

}


</style>